<template>
	<view class="">
		<top-heigth backTitle="接单位置" style="background-color: #fff;"></top-heigth>
					
			<view class="content-box" v-if="detail">
				<view class="mine-font">
					
					<view class="list">
						<view class="list-l">
							<view class="">接单位置</view>
							<view>{{detail.staffAddress}}</view>
						</view>
						<view class="list-r" @click="chooseLocation">
							修改
						</view>
					</view>
					<view class="list list2">
						<view class="list-l">服务区域（KM）</view>
						<view class="list-r">
							<uv-input v-model="detail.coverage"
							 placeholder="请输入内容" inputAlign="center" border="none" 
							  style="width: 160rpx; background: #F0F0F0;padding: 8rpx 10rpx;" type="number" @input="kmInputChange" @blur="changeKm"></uv-input>
						</view>
					</view>
					
				</view>
			</view>
			
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				detail: null,
			}
		},
		components: { TopHeigth },
		onLoad() {
			this.getDetail()
		},
		methods: {
			getDetail(){ // 技师详情
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id:this.userInfo.id,
				}).then((res) => {
					this.detail = res.data
				})
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						var oldRes = res
								uni.request({
									url:"https://restapi.amap.com/v3/geocode/regeo?key=8bb5265417fbf03e07a85e276baa162d&location="+res.longitude+","+res.latitude+"&poitype=&radius=1000&extensions=base&roadlevel=0",
									success:(res) => {
										if(res.statusCode == 200){
												this.regionId = res.data.regeocode.addressComponent.adcode;
												this.changeLocation(oldRes);
										
										}
									}
								})
					
					}
				});
			},
			kmInputChange(){
				this.$nextTick(() => {
					if(this.detail.coverage*1 < 0){
						this.detail.coverage = 0
					}
					
					if(this.detail.coverage*1 > 50){
						this.detail.coverage = 50
					}
				})
				
			},
			changeKm(){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/updateTAppStaff',{
					id:this.detail.id,
					version:this.detail.version,
					coverage:this.detail.coverage
				}).then((res) => {
					this.getDetail()
				})
			},
			changeLocation(res){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/updateTAppStaff',{
					id:this.detail.id,
					version:this.detail.version,
					staffAddress: res.name,
					staffLat: res.latitude,
					staffLng: res.longitude,
					regionId:this.regionId
				}).then((res) => {
					this.getDetail()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.mine-back{
		background: url("/static/image/back2.png") no-repeat;
		background-size: 100% auto;
		
	}
	
	.mine-font{
		background: #fff;
		border-radius: 16rpx;
		//box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.05);
		font-size: 28rpx;
		color: #02091A;
		margin-top: 24rpx;
		padding: 0 24rpx;
		.list{
			@include flex;
			align-items: end;
			justify-content:space-between;
			padding:28rpx 0;
			border-bottom: 2rpx solid #eee;
			.go{
				width: 32rpx;
				height: 32rpx;
			}
			.list-l{
				
				min-width:70%;
			}
			.list-r{
				@include flex;
				align-items: center;
				justify-content:flex-end;
				width: calc(100% - 164rpx);
				.list-r-font{
					width: calc(100% - 32rpx);
					color: #333;
					font-size: 24rpx;
					margin-right: 16rpx;
				}
			}
			.list-but{
				border: 2rpx solid #278FFF;
				background: #fff;
				color: #278FFF;
				text-align: center;
				line-height: 52rpx;
				height: 52rpx;
				width: 162rpx;
				border-radius: 52rpx;
				margin-left: 8rpx;
				font-size: 28rpx;
			}
		}
		.list2{
			@include flex;
			align-items: center;
			justify-content:space-between;
		}
		.list:last-child{
			border-bottom:none;
		}
	}
</style>
